<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圆弧</title>
</head>

<body>
    <canvas id="can" width="500" height="500" style="border:solid 1px red;"></canvas>
    <script>
        var c = document.getElementById("can");
        var objClient = {
            x: c.clientWidth / 2,
            y: c.clientHeight / 2
        }
        var ctx = document.getElementById("can").getContext("2d");
        ctx.moveTo(objClient.x, 0);
        ctx.lineTo(objClient.x, c.clientHeight);
        ctx.moveTo(0, objClient.y);
        ctx.lineWidth = "2";
        ctx.lineTo(c.clientWidth, objClient.y);
        ctx.strokeStyle = "green";
        ctx.fillText("圆弧的绘制", 10, 20)
        ctx.stroke();


        ctx.beginPath();
        moveTo(objClient.x, objClient.y);
        ctx.arc(objClient.x, objClient.y, 80, -1 / 2 * Math.PI, 1 / 2 * Math.PI, false);
        ctx.closePath();
        ctx.strokeStyle = "red";
        ctx.lineWidth = "2";
        ctx.fillStyle = "yellow";
        ctx.fill();
        // ctx.lineCap = "round";
        ctx.linejoin = "round"
        ctx.stroke();
    </script>
</body>

</html>